<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro"  uri="http://shiro.apache.org/tags" %>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>账户日数据</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
  </head>
  <style>
    .col-md-2{
      padding: 0;
    }
    .modular{
      font-size: 25px;
      /*font-weight: bold;*/
      color: white;
    }
    .name{
      height: 40px;
      line-height: 40px;
      float: left;
      width: 80px;
      font-size: 18px;
    }
    .form-group{
      margin-bottom: 5px;
    }
    .col-md-3{
      padding: 0;
    }
    .col-md-2{
      padding: 0;
    }
  </style>
  <body>
  <div class="page">
    <!-- Main Navbar-->
    <jsp:include page="header.jsp"></jsp:include>
    <div class="page-content d-flex align-items-stretch">
      <!-- Side Navbar -->
      <jsp:include page="left.jsp"></jsp:include>
      <div class="content-inner" style="background-color: white">
        <!-- Page Header-->
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">流水查询</h2>
          </div>
        </header>
        <div class="content-box" >
          <div class="col-md-12" style="border: 1px #ddd solid">
            <div class="col-md-6" style="padding: 0;font-size: 16px;font-weight: bold;line-height: 50px">当月账单(含当月每日账单 单位 ：元)
              <div style="height: 35px;width: 80px;position: absolute;top: 7px;left: 175%;">
                <a href="/query/queryPage?id=${id}" style=""><button class="btn green" style="margin-left: 30px;">返回</button></a>
              </div>
            </div>

            <div class="col-md-12" style="min-height: 600px;;margin-bottom: 15px;" >
              <input id="searchMerchantId" value="${id}" type="hidden">
              <input id="searchMon" value="${mon}" type="hidden">
              <div class="row">
                <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
              </div>
            </div>
          </div>
        </div>
        <!-- Page Footer-->
        <jsp:include page="footer.jsp"></jsp:include>
      </div>
    </div>
  </div>
    <!-- Main File-->
  <script>
    $("#query-menu").addClass('active');
  </script>
  <!--   Core JS Files   -->
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/layui/excel.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/FileSaver.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/jszip.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/xlsx.js"></script>
  <script type="text/javascript">
    var width=$('.layui-table-body').width();
    $( function () {
      //var ids = $("#searchMerchantId").val();
      //$("#black_href").attr("href","Query.html?id="+ids);

      var id = $("#searchMerchantId").val();
      var ym = $("#searchMon").val();

      layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
          elem: '#demoReload'
          , type: 'month'
        });
      });
      layui.use('table', function () {
        // laydate.render({
        //     elem: '#demoReload'
        //     ,type:'month'
        // });
        var table = layui.table;
        //方法级渲染
        table.render({
          elem: '#LAY_table_user'
          , url: "/query/settlementDay?id=" + id + "&ym=" + ym
          , cols: [[
            {field: 'dateStr', title: '账单结算时间', width: width * 0.2}
            , {field: 'eleccost', title: '电子账户费用', width: width * 0.2, sort: true}
            , {field: 'watercost', title: '水子账户费用', width: width * 0.2}
            , {field: 'gascost', title: '气子账户费用', width: width * 0.2}
            , {field: 'shareeleccost', title: '电子分摊费用', width: width * 0.2}
            , {field: 'sharewatercost', title: '水子分摊费用', width: width * 0.2}
            , {field: 'sharegascost', title: '气子账户费用', width: width * 0.2}
            , {field: 'cost', title: '合计', width: width * 0.2}
          ]]
          , id: 'testReload'
          , page: true
          , height: 522
          , response: {
            statusCode: 666
          }
          // ,even:true //每行条纹
          , limits: [10, 15, 20, 25, 30]
          , limit: 10 //每页默认显示的数量
          , toolbar: '#toolbarDemo'  //导出打印
          , parseData: function (res) {
            return {
              "code": res.code,
              "msg": res.msg,
              "count": res.data.count,
              "data": res.data.selectList
            };
          }
          , done: function (res, curr, count) {
            // $(".layui-table-box").find("[data-field='id']").css("display","none");
            $("[data-field='state']").children().each(function () {
              if ($(this).text() == '1') {
                $(this).text("启用")
              } else if ($(this).text() == '0') {
                $(this).text("未启用");
              }
            });
          }

        });

        var $ = layui.$, active = {
          reload: function () {
            var demoReload = $('#demoReload');
            //执行重载
            table.reload('testReload', {
              page: {
                curr: 1 //重新从第 1 页开始
              }
              , where: {
                key: {
                  id: demoReload.val()
                }
              }
            });
          }
        };

        //监听行单击事件（单击事件为：rowDouble）
        //其中的user对应的是 table中的lay-filter="user"
        table.on('row(user)', function (obj) {
          var data = obj.data;
          var id = data['id'];
          // layer.alert(JSON.stringify(data.id));
          // window.location.href="{:U('Company_Charging/Query')}&id="+id;
          //标注选中样式
          obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });

      });
    });
    //根据key,返回url中指定参数的value
    function getParameter(url,paramKey)
    {
      var paramValue = "";
      url = url.substr(url.indexOf("?")+1);
      var paramArray = new String(url).split("&");
      $.each(paramArray,function(i, paramStr){
        var params = paramStr.split("=");
        if(paramKey == params[0])
        {
          paramValue =  decodeURI(params[1]);
          return false;
        }
      });
      return paramValue;
    }
  </script>
  </body>
</html>